<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/show/show_banner.png" style="width:100%" alt />
      <div class="bread">
        <p>Home》collection</p>
      </div>
    </div>
    <div class="center">
      <ul>
        <li v-for="(item,index) of list" :key="index">
          <div class="top">
            <img :src="item.img" alt />
            <div class="ziti">
              <p>{{item.title1}}</p>
            </div>
          </div>
          <div class="bottom">
            <div class="ziti">
              <p>{{item.title2}}</p>
            </div>
            <img :src="item.img2" alt />
          </div>
        </li>
      </ul>
    </div>

    <enfoot2 class="dibu"></enfoot2>
  </div>
</template>
<script>
import enfoot2 from "./enfoot2";
export default {
  data() {
    return {
      list: [
        {
          img: require("../../assets/image/encollection/1.jpg"),
          title1:
            "Rhinoceros horn cup with patterns of legendary dragon The Qing Dynasty",
          img2: require("../../assets/image/encollection/2.jpg"),
          title2: "Frog and lotus shaped agate water bowlThe Qing Dynasty",
        },
        {
          img: require("../../assets/image/encollection/3.jpg"),
          title1:
            "Rhinoceros horn cup with patterns of legendary dragon The Qing Dynasty",
          img2: require("../../assets/image/encollection/4.jpg"),
          title2: "Frog and lotus shaped agate water bowlThe Qing Dynasty",
        },
        {
          img: require("../../assets/image/encollection/5.jpg"),
          title1:
            "Rhinoceros horn cup with patterns of legendary dragon The Qing Dynasty",
          img2: require("../../assets/image/encollection/6.jpg"),
          title2: "Frog and lotus shaped agate water bowlThe Qing Dynasty",
        },
        {
          img: require("../../assets/image/encollection/7.jpg"),
          title1:
            "Rhinoceros horn cup with patterns of legendary dragon The Qing Dynasty",
          img2: require("../../assets/image/encollection/8.jpg"),
          title2: "Frog and lotus shaped agate water bowlThe Qing Dynasty",
        },
        {
          img: require("../../assets/image/encollection/9.jpg"),
          title1:
            "Rhinoceros horn cup with patterns of legendary dragon The Qing Dynasty",
        },
      ],
    };
  },
  components: {
    enfoot2: enfoot2,
  },
  methods: {},
};
</script>
<style scoped>
li {
  list-style: none;
}
p,
ul,
li {
  padding: 0px;
  margin: 0px;
}

.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}
.center {
  max-width: 1200px;

  margin: 114px auto;
}

.center li .top,
.center li .bottom {
  box-sizing: border-box;
  padding: 27px 32px 27px;
  display: flex;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 30px;
  color: #333333;
  border: 2px solid gainsboro;
}
.center li .bottom:last-child {
  padding: 0px;
  border: none;
}
.ziti {
  text-align: center;
  display: flex;
  align-items: center;
  line-height: 2;
}
/* .center li .bottom:not(:last-child){
box-sizing: border-box;
  padding:27px 32px 27px;
  display:flex;
  font-size:30px;
  font-family: Arial, Helvetica, sans-serif;
    margin-bottom:30px;
  color:#333333;
    border:2px solid gainsboro
} */
.center li .top img {
  margin-right: 125px;
}
.center li .bottom img {
  margin-left: 125px;
}
</style>